import Phaser from 'phaser';

class StartScene extends Phaser.Scene {
  constructor() {
    super({ key: 'StartScene' });
  }

  preload() {
    // Preload any assets needed for the start screen, if any
    // For example, a background image or button image
    this.load.image('starfield', 'assets/new_background.jpg'); // Reuse background
  }

  create() {
    // Add background
    this.add.tileSprite(0, 0, this.cameras.main.width, this.cameras.main.height, 'starfield')
      .setOrigin(0, 0)
      .setScrollFactor(0);

    // Display Game Title
    this.add.text(this.cameras.main.width / 2, this.cameras.main.height / 2 - 100, '太空射手', {
      fontSize: '64px',
      fill: '#FFF',
      fontStyle: 'bold'
    }).setOrigin(0.5);

    // Display Start Button
    const startButton = this.add.text(this.cameras.main.width / 2, this.cameras.main.height / 2 + 50, '开始游戏', {
      fontSize: '48px',
      fill: '#0F0',
      backgroundColor: '#333',
      padding: { x: 20, y: 10 }
    })
    .setOrigin(0.5)
    .setInteractive(); // Make the text clickable

    // Add hover effect to the button
    startButton.on('pointerover', () => {
      startButton.setStyle({ fill: '#FF0' }); // Change color on hover
    });

    startButton.on('pointerout', () => {
      startButton.setStyle({ fill: '#0F0' }); // Change back on hover out
    });

    // Add click event listener
    startButton.on('pointerdown', () => {
      this.scene.start('MainScene'); // Start the main game scene
    });
  }
}

export default StartScene;